<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .box {
        width: 36px;
        height: 36px;
        line-height: 36px;
        border-radius: 50%;
        background: blue;
        color: red;
        animation: scrolltop 0.5s linear infinite;
        overflow: hidden;
        box-sizing: border-box;
        text-align: center;
      }
      @keyframes scrolltop {
        0% {
          padding-top: 0;
          line-height: 36px;
        }
        50% {
          padding-top: 18px;
          line-height: 36px;
        }
        100% {
          padding-top: 36px;
          line-height: 0;
        }
      }
      @-webkit-keyframes scrolltop {
        0% {
          padding-top: 0;
          line-height: 36px;
        }
        100% {
          padding-top: 36px;
          line-height: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="box">123</div>
  </body>
</html>
